<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/loading.css">
  <link rel="stylesheet" href="./css/mint-ui.min.css">
  <link rel="stylesheet" href="./css/element-ui.css">
  <link rel="stylesheet" href="./css/dealList.css">
  <title>Document</title>
</head>
<body>
  <div id="appLoading">
   <img src="./images/loading.gif" width="50px" height="50px">
   <div class="loading-text">加载中......</div>
  </div>
  <div id="DealList" style="display:none">
    <mt-header title="全部订单">
      <mt-button icon="back" onclick="javascript:history.back(-1);">返回</mt-button>
    </mt-header>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部订单" name="全部订单">
        <el-row v-for="deal in deals" class="delt-deal">
          <el-col>
            <span style="font-size:12px; color: #C0C4CC">订单编号： {{deal.identifier}}</span>
            <span style="font-size:12px; color: red; float: right">{{deal.type}}</span>
          </el-col>
          <el-col>
            <div class="pros-list-img">
              <img v-for="pro in deal.products" :src="pro.img" width="30px" height="30px" alt="">
            </div>
          </el-col>
          <el-col>
            <span>实付：  ￥</span>
            <span style="color:red">{{deal.allPrice}}</span>
            <span style="color:#C0C4CC">共{{deal.num}}件</span>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane :label=type :name=type v-for="type in types">
        <el-row v-for="deal in SortDeals" class="delt-deal">
          <el-col>
            <span style="font-size:12px; color: #C0C4CC">订单编号： {{deal.identifier}}</span>
            <span style="font-size:12px; color: red; float: right">{{deal.type}}</span>
          </el-col>
          <el-col>
            <div class="pros-list-img">
              <img v-for="pro in deal.products" :src="pro.img" width="30px" height="30px" alt="">
            </div>
          </el-col>
          <el-col style="margin-bottom:10px;">
            <span>实付：  ￥</span>
            <span style="color:red">{{deal.allPrice}}</span>
            <span style="color:#C0C4CC">共{{deal.num}}件</span>
            <el-button class="dea-pay-btn" size="mini" v-if="deal.type == '待付款'" plain>支付宝支付</el-button>
            <el-button class="dea-pay-btn" size="mini" type="danger" v-if="deal.type == '待付款'" plain>微信支付</el-button>
          </el-col>
          <div class="dea-pay-sign" v-if="deal.type == '待付款'">请于XXXX之前支付订单，否则订单自动关闭</div>
        </el-row>
        <el-button v-if="!AllLoaded" @click.nativ="loadmore" type="text" style="font-size:12px;text-align:center">加载更多</el-button>
        <div v-if="AllLoaded" style="font-size: 12px;color:#909399;margin:5px 0px;text-align:center">已全部加载完毕</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</body>
  <script src="./js/vue.min.js"></script>
  <script src="./js/element-ui.js" charset="utf-8"></script>
  <script src="./js/mint-ui.min.js"></script>
  <script type="text/javascript">
    new Vue({
      el: "#DealList",
      data(){
        return {
          AllLoaded: true,
          types:[
            "待付款",
            "待发货",
            "待收货",
            "交易完成",
            "交易冻结"
          ],
          deals: [
            {
              id: 1,
              type: "待发货",
              products: [
                {
                  id: 1,
                  img: './images/goods/logo.png',
                },
                {
                  id: 2,
                  img: './images/goods/logo.png',
                },
                {
                  id: 1,
                  img: './images/goods/logo.png',
                },
                {
                  id: 2,
                  img: './images/goods/logo.png',
                },
                {
                  id: 1,
                  img: './images/goods/logo.png',
                },
                {
                  id: 2,
                  img: './images/goods/logo.png',
                },
                {
                  id: 1,
                  img: './images/goods/logo.png',
                },
                {
                  id: 2,
                  img: './images/goods/logo.png',
                },
                {
                  id: 1,
                  img: './images/goods/logo.png',
                },
                {
                  id: 2,
                  img: './images/goods/logo.png',
                },
                {
                  id: 1,
                  img: './images/goods/logo.png',
                },
                {
                  id: 2,
                  img: './images/goods/logo.png',
                }
              ],
              allPrice: 184,
              num: 2,
              identifier: 15628256354600
            },
            {
              id: 2,
              type: "待收货",
              products: [
                {
                  id: 1,
                  img: './images/goods/logo.png',
                },
                {
                  id: 2,
                  img: './images/goods/logo.png',
                }
              ],
              allPrice: 114,
              num: 2,
              identifier: 15628256354601
            },
            {
              id: 3,
              type: "待付款",
              products: [
                {
                  id: 1,
                  img: './images/goods/logo.png',
                },
                {
                  id: 2,
                  img: './images/goods/logo.png',
                }
              ],
              allPrice: 384,
              num: 2,
              identifier: 15628256354602
            },
            {
              id: 4,
              type: "交易完成",
              products: [
                {
                  id: 1,
                  img: './images/goods/logo.png',
                },
                {
                  id: 2,
                  img: './images/goods/logo.png',
                }
              ],
              allPrice: 384,
              num: 2,
              identifier: 15628256354602
            },
            {
              id: 5,
              type: "交易冻结",
              products: [
                {
                  id: 1,
                  img: './images/goods/logo.png',
                },
                {
                  id: 2,
                  img: './images/goods/logo.png',
                }
              ],
              allPrice: 384,
              num: 2,
              identifier: 15628256354602
            },
            {
              id: 6,
              type: "交易冻结",
              products: [
                {
                  id: 1,
                  img: './images/goods/logo.png',
                },
                {
                  id: 2,
                  img: './images/goods/logo.png',
                }
              ],
              allPrice: 384,
              num: 2,
              identifier: 15628256354602
            }
          ],
          type: null
        }
      },
      mounted(){
        document.getElementById('DealList').style.display = 'block';
        document.getElementById('appLoading').style.display = 'none';
        // axios.get("")
      // .then((res) => {
      //   this.deals = res.data
      //   //如果你要写成接口请求数据，把 vue data里的deals数组清空。
      // })
      // .catch((err) => {
      //   this.$messagebox.alert("页面加载失败","提示");
      // })
      },
      methods: {
        handleClick(tab) {
          this.type = tab.name
        },
        loadmore(){
        console.log("loadmore");
        this.goods.push.apply(this.goods,data);
        console.log(data);
        console.log(this.goods);
        // axios.get("")
        // .then((res) => {
        //   this.goods.push(res.data);
        // })
        // .catch((err) => {
        //   //如果没有数据返回会被err捕捉的话，如果没有捕捉错误，在then里进行判断是否有数据返回
        // 全部记载完毕 or 加载出错？
        //   this.AllLoaded = true
        // })
        }
      },
      computed: {
        SortDeals: function(){
          var myType = this.type;
          return this.deals.filter(function(elem){
            return elem.type == myType
          })
        },
        activeName: function(){
          return "待付款";
        }
      }
    })
  </script>
</html>
